<template>
  <div class="app-container">
    <el-dialog
      :title="dialogtitle"
      :visible.sync="dialogVisible"
      width="98%"
      top="20px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <Edit :infoid="id" :read-only="readOnly" :timestamp="timestamp" :step="step" @dialogHide="dialogHide($event)" />
    </el-dialog>

    <div class="filter-container">
      <div style="float:left;">
        <el-input v-model="listQuery.srptBgbh" placeholder="报告编号" style="width: 200px;margin-left: 10px;" class="filter-item" />
        <el-input v-model="listQuery.applynumber" placeholder="申请编号" style="width: 200px;margin-left: 10px;" class="filter-item" />
        <el-input v-model="listQuery.sggxh" placeholder="规格型号" style="width: 200px;margin-left: 10px;" class="filter-item" />
        <!-- <el-input v-model="listQuery.srptBgmc" placeholder="报告名称" style="width: 200px;margin-left: 10px;" class="filter-item" /> -->
        <!-- <el-input v-model="listQuery.ajh" placeholder="检测机构" style="width: 200px;margin-left: 10px;" class="filter-item" /> -->
        <el-select v-model="listQuery.sstate" placeholder="状态" clearable style="margin-left: 10px;width: 200px" class="filter-item">
          <el-option label="全部" :value="null" />
          <el-option v-for="(it,index) in sstateList" :key="index" :label="it.label" :value="it.value" />
        </el-select>
        <el-button class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 10px;" @click="handleFilter">
          搜索
        </el-button>
      </div>
      <!-- <el-button class="filter-item" type="success" icon="el-icon-edit" style="margin-left: 10px;float:right" @click="addnew">
        新增报告
      </el-button> -->
      <!-- <el-popconfirm v-if="roleEdit" title="确定批量删除所选信息吗？" style="margin-left:10px;float:right" @onConfirm="deleteData()">
        <el-button slot="reference" type="danger" class="filter-item" icon="el-icon-delete">批量删除</el-button>
      </el-popconfirm> -->
    </div>
    <template v-if="status==='待处理'">
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
        @sort-change="sortChange"
      >
        <!-- <el-table-column v-if="roleEdit" type="selection" width="50" align="center" /> -->

        <el-table-column align="left" prop="s_rpt_bgbh" label="检验报告编号" width="160px" sortable="custom">
          <template slot-scope="scope">
            <span>{{ scope.row.srptBgbh }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="applynumber" label="申请编号" width="150px" sortable="custom" />
        <!-- <el-table-column width="200px" prop="ajmc" label="报告类型" show-overflow-tooltip sortable="custom" /> -->
        <!-- <el-table-column align="left" prop="srptBgmc" label="报告名称" min-width="140px" sortable="custom">道路运输车辆达标车型总报告</el-table-column> -->
        <el-table-column width="120px" prop="s_rpt_cplx" label="车辆分类" show-overflow-tooltip sortable="custom">
          <template slot-scope="scope">
            <span>{{ scope.row.srptCplx }}</span>
          </template>
        </el-table-column>

        <el-table-column min-width="200px" prop="s_rpt_ypmc" label="样品名称" show-overflow-tooltip sortable="custom">
          <template slot-scope="scope">
            <span>{{ scope.row.srptYpmc }}</span>
          </template>
        </el-table-column>
        <el-table-column width="200px" prop="s_ggxh" label="规格型号" show-overflow-tooltip sortable="custom">
          <template slot-scope="scope">
            <span>{{ scope.row.sggxh }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column width="200px" prop="ajmc" label="车辆识别码（VIN）" show-overflow-tooltip sortable="custom" /> -->
        <!-- <el-table-column width="200px" prop="ajmc" label="签发日期" show-overflow-tooltip sortable="custom" /> -->
        <!-- <el-table-column width="200px" prop="ajmc" label="报告状态" show-overflow-tooltip sortable="custom" /> -->
        <el-table-column width="200px" prop="create_date" align="center" label="创建时间" sortable="custom">
          <template slot-scope="scope">
            <span>{{ timestampToTime(scope.row.createDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column width="200px" prop="s_rpt_jydw" label="报告生成机构" show-overflow-tooltip sortable="custom">
          <template slot-scope="scope">
            <span>{{ scope.row.srptJydw }}</span>
          </template>
        </el-table-column>
        <el-table-column width="110px" prop="submitUser" align="center" label="状态" sortable="custom">
          <template slot-scope="scope">
            <span>{{ scope.row.sstate?sstateList.find(item=>item.value===scope.row.sstate).label:'' }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作" width="300">
          <template slot-scope="scope">
            <el-button size="small" type="" icon="el-icon-s-order" @click="detail(scope.row.srptBgbh)">查看</el-button>
            <el-button v-if="userType===2" size="small" type="primary" icon="el-icon-edit" @click="mod(scope.row.srptBgbh)">修改</el-button>
            <el-popconfirm v-if="userType===2" title="确定将该报告上传至B网吗？" style="margin-left:10px;" @onConfirm="uploadReport(scope.row.srptBgbh)">
              <el-button slot="reference" type="success" size="small" icon="el-icon-upload">上传</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </template>
  </div>
</template>

<script>
// import { fetchList } from '@/api/article'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import Edit from './edit'

export default {
  name: 'ArticleList',
  components: { Pagination, Edit },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  props: {
    isEdit: {
      type: Boolean,
      default: true
    },
    isSelection: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      userType: 0,
      showAddBtn: false,
      status: '待处理',
      roleEdit: true,
      selection: false,
      dicListLoading: false,
      stopDicLoading: false,
      startDicLoading: false,
      submitLoading: false,
      classList: [],
      classForm: {
        parentClass: 14,
        label: ''
      },
      diclist: [],
      settingVisible: false,
      item: {},
      dialogtitle: '',
      dialogVisible: false,
      readOnly: false,
      timestamp: false,
      list: [
      ],
      list2: [],
      list3: [],
      total: 0,
      listLoading: true,
      listQuery: {
        sstate: null,
        ajh: '',
        cfajbh: '',
        ajmc: '',
        page: 1,
        limit: 10
      },
      Sortkey: '',
      Isace: '',
      multipleSelection: [],
      id: '',
      step: '',
      showThansferBtn: false,
      knowledgeVisible: false,
      sstateList: [{ value: 0, label: '未生成' }, { value: 2, label: '已生成' }, { value: 3, label: '已上传' }]
    }
  },
  watch: {
    isEdit: {
      handler(val) {
        console.log('isEdit:' + val)
        this.roleEdit = val
      },
      immediate: true
    },
    isSelection: {
      handler(val) {
        console.log('isSelection:' + val)
        this.selection = val
      },
      immediate: true
    }
  },
  mounted() {
    this.getList()
  },
  created() {
    this.userType = JSON.parse(localStorage.getItem('user')).userType
  },
  methods: {
    timestampToTime(timestamp) {
      var date = new Date(timestamp) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = change(date.getDate()) + ' '
      const h = change(date.getHours()) + ':'
      const m = change(date.getMinutes()) + ':'
      const s = change(date.getSeconds())
      return Y + M + D + h + m + s
      function change(t) {
        if (t < 10) {
          return '0' + t
        } else {
          return t
        }
      }
    },
    replaceHtml(str) {
      if (str && str !== '') {
        var re = new RegExp('<[^<>]+>', 'g')
        var text1 = str.replace(re, '')
        return text1
      } else {
        return str
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteData(id) {
      this.$http
        .get('/api/ga/removeGa?id=' + id)
        .then(response => {
          if (response.data.success === true) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getList()
          } else {
            console.log('删除失败:' + response.data.message)
            this.$message({
              message: '删除失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    uploadReport(reportNumber) {
      this.$http
        .post('/api/check/saveInternalReport', { totalReportNumber: reportNumber })
        .then(response => {
          if (response.data.success === true) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.getList()
          } else {
            console.log('操作失败:' + response.data.message)
            this.$message({
              message: '操作失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    saveToQuestion(id) {
      this.$http
        .post('/api/workOrder/saveToQuestion', { orderId: id })
        .then(response => {
          if (response.data.success === true) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.getList()
          } else {
            console.log('操作失败:' + response.data.message)
            this.$message({
              message: '操作失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    sortChange(column, prop, order) {
      this.Sortkey = column.prop
      if (column.order === 'ascending') {
        this.Isace = 'asc'
      } else {
        this.Isace = 'desc'
      }
      this.getList()
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    mod(id) {
      this.id = id
      this.readOnly = false
      this.dialogtitle = '修改'
      this.dialogVisible = true
      this.timestamp = new Date().getTime()
      this.step = 'detail'
    },
    detail(id) {
      this.id = id
      this.readOnly = true
      this.dialogtitle = '查看'
      this.dialogVisible = true
      this.timestamp = new Date().getTime()
      this.step = 'detail'
    },
    knowledge(id) {
      this.id = id
      this.knowledgeVisible = true
      this.timestamp = new Date().getTime()
    },
    addnew() {
      this.id = 0
      this.readOnly = false
      this.dialogtitle = '立案侦查'
      this.dialogtitle = '详情'
      this.dialogVisible = true
      this.timestamp = new Date().getTime()
      this.step = 'create'
    },
    edit(id) {
      this.id = id
      this.readOnly = false
      this.dialogtitle = '编辑'
      this.dialogVisible = true
      this.timestamp = new Date().getTime()
    },
    dialogHide(flag) {
      this.dialogVisible = false
      this.knowledgeVisible = false
      this.getList()
      this.getList2()
    },
    getList() {
      const para = {
        srptBgbh: this.listQuery.srptBgbh,
        applynumber: this.listQuery.applynumber,
        sggxh: this.listQuery.sggxh,
        sstate: this.listQuery.sstate,
        // srptBgmc: this.listQuery.srptBgmc,
        orderField: this.Sortkey,
        orderType: this.Isace,
        pageNum: this.listQuery.page,
        pageSize: this.listQuery.limit
        // publishTime: this.listQuery.publishTime,
        // title: this.listQuery.title
      }
      this.listLoading = true
      this.$http
        .post('/api/check/queryTotalReportByPage', para)
        .then(response => {
          this.listLoading = false
          if (response.data.success === true) {
            this.list = response.data.result.records
            this.total = response.data.result.total
            if (response.data.result.current > response.data.result.pages && response.data.result.pages !== 0) {
              this.listQuery.page = response.data.result.pages
              this.getList()
            }
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.listLoading = false
        })
      // fetchList(this.listQuery).then(response => {
      //   this.list = response.data.items
      //   this.total = response.data.total
      //   this.listLoading = false
      // })
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
